<template>
  <div
    :id="info?.uuid"
    style="padding: 34px 30px; background-color: #fff; height: 100%"
  >
    <div
      style="
        padding: 30px 15px;
        background-color: #fff;
        height: 100%;
        width: 100%;
        margin: 0 auto;
        font-size: 12px;
        box-sizing: border-box;
      "
    >
      <!-- 医院名称 -->
      <h1 style="text-align: center; font-size: 16px; margin-bottom: 20px">
        {{ info?.title }}
      </h1>
      <h1 style="text-align: center; font-size: 16px; margin-bottom: 20px">
        查验申请单
      </h1>

      <!-- 患者基础信息 -->
      <div
        style="
          display: flex;
          flex-wrap: wrap;
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >姓名：</span
          >{{ info?.patientName }}
          {{
            info?.patientGender == 1
              ? '男'
              : info?.patientGender == 2
              ? '女'
              : '未知'
          }}
        </div>
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >年龄：</span
          >{{ info?.ageYear }}年{{ info?.ageMonth }}月
        </div>
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >电话：</span
          >{{ info?.patientPhone }}
        </div>
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >科室：</span
          >{{ info?.deptName }}
        </div>
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >诊号：</span
          >{{ info?.visitNo }}
        </div>
        <div
          style="
            font-size: 12px;
            width: 33.33%;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >类型：</span
          >
          {{ info?.visitType == 1 ? '初诊' : '复诊' }} ({{
            info?.regType == 1 ? '普通' : '急诊'
          }})
        </div>
      </div>

      <div
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          style="
            display: flex;
            width: 100%;
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          "
        >
          <span
            style="
              width: 50px;
              display: block;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >初步诊断</span
          >：
          <ul
            style="
              width: calc(100% - 100px);
              margin-left: 10px;
              list-style: none;
              padding: 0;
            "
          >
            <li>
              {{ info?.preliminaryDiagnosis }}
            </li>
          </ul>
        </div>
      </div>

      <div
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <table style="font-size: 12px; text-align: left; width: 100%">
          <thead>
            <tr style="line-height: 2">
              <th style="width: 35%">项目</th>
              <th style="width: 12%">频率</th>
              <th style="width: 12%">周期</th>
              <th style="width: 12%">总量</th>
              <th style="width: 29%">备注</th>
            </tr>
          </thead>
          <tbody
            v-for="(item, index) in info?.examList"
            :key="index"
            style="line-height: 2"
          >
            <tr>
              <td colspan="5">{{ item.projectName }}<span v-if="item.sampleType">({{ useBaseDataStore.getEnumData(item.sampleType,'labSampleTypeEnum') }})</span></td>
            </tr>
            <tr>
              <td></td>
              <td>{{ item.frequencyCodeText }}</td>
              <td>{{ item.cycle }}{{ item.cycleUnitText }}</td>
              <td>{{ item.totalOutQty }}{{ item.totalOutQtyUnitText }}</td>
              <td>{{ item.remark }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div
        style="
          border-bottom: 2px solid rgba(0, 0, 0, 0.9);
          margin-bottom: 10px;
          padding-bottom: 10px;
        "
      >
        <div
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
          "
        >
          <span
            style="
              width: 52px;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系电话</span
          >：
          <div style="margin-left: 5px">{{ info?.phone }}</div>
        </div>
        <div
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
          "
        >
          <span
            style="
              width: 52px;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >联系地址</span
          >：
          <div style="margin-left: 5px">{{ info?.address }}</div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div style="display: flex; flex-wrap: wrap">
        <div
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: auto;
          "
        >
          <span
            style="
              width: 65px;
              text-align: justify;
              text-justify: inter-character;
              text-align-last: justify;
            "
            >打印时间：</span
          >
          <div style="margin-left: 5px">{{ info?.printTime }}</div>
        </div>
      </div>
      <!-- 底部信息 -->
      <div style="width: 180px; margin-left: auto">
        <div
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span style="display: block">医生姓名：</span>
          <div
            style="
              width: 120px;
              height: 40px;
              display: flex;
              justify-content: center;
            "
            v-if="info?.signature"
          >
            <img :src="info?.signature" alt="" style="height: 40px" />
          </div>
          <div v-else>{{ info?.doctorName }}</div>
        </div>
        <div
          style="
            font-size: 12px;
            font-weight: 400;
            color: #000000;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            display: flex;
            width: 100%;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <span>完诊日期：</span>{{ info?.applyDate }}
        </div>
      </div>
      <!-- <img
        :src="qrCodeStr"
        v-if="qrCodeStr != ''"
        style="width: 76px; height: 76px; display: block; margin: 20px auto"
        alt=""
      /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PrintConfig } from '@/utils/print';
import store from '@/store';
const useBaseDataStore = store.useBaseDataStore();
const emit = defineEmits(['onCancel']);
const props = defineProps({
  info: {
    type: Object,
    required: false,
  },
});
const qrCodeStr = ref<any>(''); // 明确类型并初始化为 null
const onPrintQRCode = () => {
  //console.log('1111111111111');
};
const getHtml = () => {
    // 获取dom9元素
    const dom9Element = document.getElementById(props?.info?.uuid);
    if (!dom9Element) {
      //console.error('未找到打印元素');
      //ElMessage.error('未找到打印内容');
      return;
    }

    const htmlContent = dom9Element.innerHTML || '';

    // 得力801p热敏打印机专用配置
    const printConfig: PrintConfig = {
      content: htmlContent,
      styles: {
        pageSize: 'A5',
        margin: '0mm',
        customStyles: '',
      },
    };
    return printConfig;
};
defineExpose<{
  onPrintQRCode: () => void;
  getHtml: () => void;
}>({
  onPrintQRCode,
  getHtml,
});
</script>
